<!DOCTYPE html>
<html>
<head>
	<title>ht test</title>
	<meta charset="UTF-8">  
</head>
<style>
    html, body {
        padding: 0px;
        margin: 0px;                
    }            
    .main {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
</style> 

<script>
    htconfig = {
        Color: {          
            label: '#000',
            highlight: '#1ABC9C',           
        },
        Default: {
            toolTipDelay: 100,
            toolTipContinual: true
        },                
        Style: {
            'edge.color':'#35e377'
        }
    };
</script>     
<script src="js/ht.js"></script>
<script type="text/javascript">
	function initTopo(){            


		dataModel = new ht.DataModel();
        graphView = new ht.graph.GraphView(dataModel);
        // view = graphView.getView();

        // view.className = 'main';
        // document.body.appendChild(view);
        window.addEventListener('resize', function (e) {
            graphView.invalidate();
        }, false);

        graphView.setEditable(true);
        graphView.setRectEditableFunc(function(data){
            return data === air11;
        });
        graphView.setRotationEditableFunc(function(data){
        	if(data == air13){
        		return true;
        	}
        	return false;
        });
        
        var eventType = ht.Default.isTouchable ? 'touchend' : 'mouseup';
        graphView.getView().addEventListener(eventType, function(e){
            var data = graphView.getDataAt(e);
            if(data && ht.Default.isDoubleClick(e)){
                alert(data.getName() + ' is double clicked.');
            }
        });



		ht.Default.setImage('device', 'imgs/TCC4100.png');            
		ht.Default.setImage('badStaus', 'imgs/status1.png');            
		ht.Default.setImage('normalStaus', 'imgs/status5.png');

		air11 = new ht.Node();
		air11.setName('127.0.0.1');
		air11.setImage('imgs/TCC4100.png');
		air11.setSize(55, 55);
		air11.setPosition(100, 170);
		dataModel.add(air11);

		air12 = new ht.Node();
		air12.setName('172.16.21.53');
		air12.setImage('device');
		air12.setSize(55, 55);
		air12.setPosition(100, 470);      
		air12.setAttr("mac","FF FF FF FF FF FF");          
		dataModel.add(air12);

		air13 = new ht.Node();
		air13.setName('172.16.21.52');                
		air13.setImage('device');
		air13.setPosition(460, 170);
		air13.setRotation(Math.PI*0);
		dataModel.add(air13);

		//给设备添加状态图标
		air11.addStyleIcon("normal", {
            position: 6,
            width: 16,
            height: 16,
            positionFixed: true,
            names: ['normalStaus']
        });

        air12.addStyleIcon("normal", {
            position: 6,
            width: 16,
            height: 16,
            positionFixed: true,
            names: ['normalStaus']
        });   

		air13.addStyleIcon("normal", {
            position: 6,
            width: 16,
            height: 16,
            positionFixed: true,
            names: ['badStaus']
        });   


		var edge11_12 = new ht.Edge(air11,air12);
		edge11_12.setName("G0/1-G0/2");
		dataModel.add(edge11_12); 		
		var edge11_13 = new ht.Edge(air11,air13);
		edge11_13.setName("G0/1-G0/3");
		dataModel.add(edge11_13); 		
		var edge12_13 = new ht.Edge(air12,air13);
		edge12_13.setName("G0/2-G0/3");
		dataModel.add(edge12_13); 
		edge12_13.setStyle("edge.color","#e74f4f");

		//重写此方法可以 更换node显示名称
		graphView.getLabel = function(data){
			if(data instanceof ht.Edge){
				return data.getName();
			}else{
				return data.getName();
			}
		};

		/*添加 toolbar*/
		//1.遍历添加图片
		['zoomIn', 'zoomOut', 'fitContent', 'default', 'edit', 'shape', 'node', 'edge'].
			forEach(function(name){
	    		ht.Default.setImage(name, 'imgs/toolbarimg/' + name + '.png');
	    });

		items = [
		    {
		        icon: 'zoomIn',
		        action: function() {
		            graphView.zoomIn(true);
		        },
		    	toolTip:'放大'
		    },
		    {
		        icon: 'zoomOut',
		        action: function() {
		            graphView.zoomOut(true);
		        },
		        toolTip:'缩小'
		    },
		    {
		        icon: 'fitContent',
		        action: function() {
		            graphView.fitContent(true);
		        },
		        toolTip:'自动调整'
		    },
		    "separator",
		    {
		        icon: 'default',
		        groupId: 'interaction',
		        action: function() {
		            graphView.setEditable(false);
		        },
		        toolTip:'拖拽模式'
		    },
		    {
		        icon: 'edit',
		        groupId: 'interaction',
		        action: function() {
		            graphView.setEditable(true);
		        },
		        toolTip:'编辑模式'
		    },
		    {
		        icon: 'node',
		        groupId: 'interaction',
		        // action: function() {
		        //     graphView.setInteractors([
		        //         new ht.graph.DefaultInteractor(graphView),
		        //         new ht.graph.TouchInteractor(graphView, {
		        //             selectable: false
		        //         }),
		        //         new CreateNodeInteractor(graphView)
		        //     ]);
		        // },
		        toolTip:' 添加节点'
		    },
		    {
		        icon: 'edge',
		        groupId: 'interaction',
		        // action: function() {
		        //     graphView.setInteractors([
		        //         new ht.graph.DefaultInteractor(graphView),
		        //         new ht.graph.TouchInteractor(graphView, {
		        //             selectable: false
		        //         }),
		        //         new CreateEdgeInteractor(graphView)
		        //     ]);
		        // },
		        toolTip:'添加连线'
		    },
		    {
		        icon: 'shape',
		        groupId: 'interaction',
		        // selected: true,
		        // action: function() {
		        //     graphView.setInteractors([
		        //         new ht.graph.DefaultInteractor(graphView),
		        //         new ht.graph.TouchInteractor(graphView, {
		        //             selectable: false
		        //         }),
		        //         new CreateShapeInteractor(graphView)
		        //     ]);
		        // },
		        toolTip:'shape'
		    },
		    "separator",
		    {
		        label: 'Image',
		        action: function() {
		            var doc = window.open().document;
		            doc.open();
		            doc.write("<img src='" + graphView.toDataURL() + "'/>");
		            doc.close();
		            doc.body.style.margin = '0';
		            doc.title = 'Export image at ' + new Date();
		        },
		        toolTip:'生成图片'
		    },
		    {
		        label: 'JSON',
		        action: function() {
		            var doc = window.open().document;
		            doc.open();
		            doc.write("<pre>" + dataModel.serialize() + "</pre>");
		            doc.close();
		            doc.body.style.margin = '0';
		            doc.title = 'Export JSON at ' + new Date();
		        },
		        toolTip:'生成json'
		    }
		];

		toolbar = new ht.widget.Toolbar(items);
		toolbar.enableToolTip();
		borderPane = new ht.widget.BorderPane();
		borderPane.setTopView(toolbar);
		borderPane.setCenterView(graphView);

	    view = borderPane.getView();

	    view.className = 'main';
	    document.body.appendChild(view);

		window.addEventListener('resize', function(e) {
			borderPane.invalidate();
		}, false);

	}
</script>

<body onload="initTopo()">

</body>
</html>